import React, {useEffect, useState} from "react";
import {get} from "../../../utils/get";
import {Table, Button, Modal, Form, Input, Select, Tree, message} from "antd";
import axios from "axios";
const { Column } = Table;
const {Option}=Select

const RoleList= ()=>{
    const token = localStorage.getItem('TOKEN')
    const[data,setData]=useState([])
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [treeData,setTreeData]=useState([])
    const [currentRight, setCurrentRight] = useState([])//选中的权限列表
    useEffect( ()=>{
        get('/sysrole/list',token).then(res=>{
            let permission=[]
            res.data.data.forEach(role=>{
                let arr= role.permissionVoList.map(item=>{
                    return{
                        roleId:role.roleId,
                        roleName:role.roleName,
                        key:item.permissionId,
                        permissionId:item.permissionId,
                        description:item.description,
                        method:item.method
                    }
                })
               permission=permission.concat([...arr])
            })
            setData(permission)
        })

    },[])
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    const onFinish = async (values) => {
        const {roleId,roleName}=values
        const token =localStorage.getItem('TOKEN')
        const res=await axios.put(`http://120.76.43.220:8080/sysrole/${roleId}`,{
            roleId,
            roleName,
            permissionIdList:currentRight
        },{
            headers:{
                token
            }
        })
        if(res.data.code===0)
        {
            setIsModalVisible(false)
            message.info(res.data.msg)
        }
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const onCheck=(item)=>{
        setCurrentRight(item.checked);
    }
    //渲染表单
    const renderForm = ()=>{
        return (
            <Form name="basic"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item label="角色id" name="roleId"
                    rules={[
                        {
                            required: true,
                            message: '此为必填项',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item label="用户名称" name="roleName"
                    rules={[
                        {
                            required: true,
                            message: '此为必填项',
                        },
                    ]}
                >
                    <Input></Input>
                </Form.Item>
                <Form.Item label="权限列表" name="permissionIdList">
                    <Tree
                        checkable checkedKeys={currentRight}
                        onCheck={onCheck}
                        treeData={treeData}
                        checkStrictly={true}
                    />
                </Form.Item>
                <Form.Item
                    wrapperCol={{
                        offset: 18,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        )
    }

    const addResource=()=>{
        let tree = data.map(item=>{
            return {
                title:item.description,
                key:item.permissionId
            }
        })
        setTreeData(tree)
        setIsModalVisible(true)
    }
    return(
        <>
            <Button type="primary" onClick={addResource}>
                关联角色资源
            </Button>
            <Modal title="新增资源" visible={isModalVisible} footer={null} onCancel={handleCancel}>
                {
                    renderForm()
                }
            </Modal>
            <Table dataSource={data}>
                <Column title="roleName" dataIndex="roleName" />
                <Column title="method" dataIndex={"method"} key={"method"}/>
                <Column title="描述" dataIndex={"description"} key={"description"}/>
            </Table>
        </>
    )
}
export default RoleList;
